import { useState, useEffect } from "react";
import { Button, Table } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import { resourcePath } from "../../../../../../../utils/resource";
import CztApi from "../../../../../../../utils/apis/CztApi";
import { fromCircle } from "ol/geom/Polygon";
export default function ZzfxXq(props) {
    const { zzfx, geomZzfx, onUpdateXqList } = props;
    const [datas, setDatas] = useState();
    useState(() => {
        CztApi.zzfxxq(zzfx, geomZzfx).then(resp => {
            setDatas(resp.data)
        })

    }, [zzfx, geomZzfx])
    const handleClick = (record) => {
        onUpdateXqList(record)

    }

    return <div style={{
        width: 350,
        position: "absolute",
        right: 30,
        top: 30,
        bottom: 30,
        background: 'rgba(1,15,31,0.5)',
        // border: '1px solid rgba(9,107,225,0.8)',
        pointerEvents: 'auto',
        overflow: "auto",
        borderRadius: 8
    }} className="layout-v">
        <div style={{
            fontSize: 20,
            fontWeight: "bold",
            marginBottom: 12
        }} className='layout-h center'>
            <div className='fill w0'>
                <div style={{
                    background: `url(${resourcePath.blockTitleBg})`,
                    height: 36,
                    backgroundSize: '100% 100%',
                    fontSize: 18,
                    lineHeight: '36px',
                    paddingLeft: 12,
                    fontWeight: "bold",
                    overflow: "hidden"
                }}>
                    {zzfx}
                </div>
            </div>
            <div>
                <Button size="small" icon={<CloseOutlined />} style={{
                    // color: "#fff"
                    background: "#00000000"
                }} onClick={e => {
                    props.onClose?.()
                }} />
            </div>
        </div>
        <Table style={{ marginTop: 10 }}
            columns={[{
                title: '名称',
                dataIndex: 'yhmc'
            }, {
                width: 80,
                align: 'center',
                render: (text, record) => {
                    return <Button type="link" size="small" onClick={() => {
                        handleClick(record)
                    }}>详情</Button>
                }
            }]}
            dataSource={datas} />
    </div>

}